<template>
	<view class="container">
		<u-navbar class="navbar-background" title="登录"></u-navbar>
		<view class="title">
			登录
		</view>
		<view class="field">
			<text class="label">用户名：</text>
			<u-input v-model="username" type="text" border placeholder="请输入用户名"/>
		</view>
		<view class="field">
			<text class="label">密码：</text>
			<u-input v-model="password" type="password" border :password-icon="true" placeholder="请输入密码"/>
		</view>
		<view class="buttons">
			<u-button size="medium" type="primary" @click="login">登录</u-button>
			<u-button size="medium" type="info" @click="register">注册</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username:'',
				password:''
			}
		},
		methods: {
			login(){
				this.$u.post('login', {
					username: this.username,
					password: this.password
				}).then(res => {
					this.username='';
					this.password='';
					if(res.success){
						var token=res.data.token;
						var name=res.data.name;
						uni.setStorageSync("token",token);
						uni.setStorageSync("name",name);
						uni.navigateTo({
							url:'./chatRoom/chatRoom'
						})
					}
				});	
			},
			register(){
				uni.navigateTo({
					url: '/pages/me/register'
				});
			}
		}
	}
</script>

<style scoped>
.container {
	padding: 10upx;
}
.field {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 10upx;
}
.field>.label {
	width: 4em;
	text-align: right;
}

.buttons {
	padding: 10upx;
	margin-top: 20upx;
	text-align: right;
}

.buttons button {
	margin-left:10upx;
	width: 35%;
}
</style>
